<template>
    <div v-if="loading" class="loading-ui">
        <div data-loader="ball-rotate" class="loaded"></div>
    </div>
</template>

<style lang="scss" scoped>
    .loading-ui {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0,.6);
        z-index: 99;

        .loaded {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            /*width: 10px;*/
            /*height: 30px;*/
            margin: auto;
        }

    }
</style>

<script>
    export default {
        name: "loading-ui",
        props: {
            loading: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {}
        },
    }
</script>